<template>
  <el-card class="page-card">
    <div class="page-header">
      <h2>评论审核</h2>
      <el-select
        v-model="statusFilter"
        placeholder="状态筛选"
        size="small"
        class="status-select"
        @change="fetchList(1)"
      >
        <el-option :value="undefined" label="全部" />
        <el-option :value="0" label="待审" />
        <el-option :value="1" label="通过" />
        <el-option :value="2" label="隐藏" />
      </el-select>
    </div>

    <div class="table-container">
      <el-table :data="list" border stripe>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="userId" label="用户ID" width="100" />
        <el-table-column prop="orderItemId" label="订单项ID" width="120" />
        <el-table-column prop="score" label="评分" width="80" />
        <el-table-column prop="content" label="内容" show-overflow-tooltip />
        <el-table-column prop="auditStatus" label="状态" width="100">
          <template #default="{ row }">
            <el-tag type="info" v-if="row.auditStatus === 0">待审</el-tag>
            <el-tag type="success" v-else-if="row.auditStatus === 1">通过</el-tag>
            <el-tag type="warning" v-else>隐藏</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="时间" width="180" />
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button
              v-if="row.auditStatus === 0"
              size="small"
              type="success"
              @click="approve(row.id)"
            >通过</el-button>
            <el-button
              v-if="row.auditStatus === 1"
              size="small"
              type="danger"
              @click="remove(row.id)"
            >删评</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="pageNum"
        :page-size="pageSize"
        :total="total"
        @current-change="fetchList"
      />
    </div>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getEvaluations,
  approveEvaluation,
  deleteEvaluation
} from '@/api/admin'

const list = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const statusFilter = ref()

const fetchList = (page = pageNum.value) => {
  pageNum.value = page
  getEvaluations(pageNum.value, pageSize.value, statusFilter.value)
    .then(res => {
      console.log(res)
      const data = res.data.data
      list.value  = Array.isArray(data.records) ? data.records : data.list || []
      total.value = data.records.length
    })
    .catch((e) => console.log(e))
}

const approve = id => {
  ElMessageBox.confirm('确认审核通过此评论？', '提示', { type: 'warning' })
    .then(() => approveEvaluation(id))
    .then(() => {
      ElMessage.success('已通过')
      fetchList()
    })
}

const remove = id => {
  ElMessageBox.confirm('确认删除此评论？', '提示', { type: 'warning' })
    .then(() => deleteEvaluation(id))
    .then(() => {
      ElMessage.success('已删除')
      fetchList()
    })
}

onMounted(fetchList)
</script>

<style scoped>
.page-card {
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

/* 让标题和筛选框水平排列并留出间距 */
.page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

/* 标题不允许被压缩，也不自动换行 */
.page-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 给筛选框一个合适的固定宽度，而不是占满整行 */
.status-select {
  width: 160px;
}

/* 表格容器 & 分页保持之前的写法 */
.table-container {
  flex: 1;
  overflow: auto;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>

